<template>
      <div class="chat-container">
    <div class="chat-messages">
      <div v-for="message in messages" :key="message.id">
        <div v-if="message.user === 'user'" class="message-right">
          <div class="message-text">{{ message.text }}</div>
          <div class="avatar-container">
            <img class="avatar" src="/picture/user.jpg" alt="user avatar">
          </div>
        </div>
        <div v-if="message.user === 'robot'" class="message-left">
          <div class="avatar-container">
            <img class="avatar" src="/picture/rebot.png" alt="robot avatar">
          </div>
          <div class="message-text">
            <!-- <span v-if="!isCode">{{ message.text }}</span> -->
            <div v-html="message.text"></div>
            <!-- <audio ref="audio" :src="audioUrl"></audio> -->
            <!-- <button class="play-button" @click="playAudio(getTextContent(message.text))">Play</button> -->
            <!-- <code class="code-block" v-else>{{ message.text }}</code> -->
            </div>
        </div>
      </div>
    </div>
    
    <div class="chat-input">
      <!-- <audio ref="audio" :src="audioUrl"></audio>
      <button @click="playAudio">播放</button> -->
      <input type="text" v-model="newMessage" placeholder="输入消息">
      <button @click="sendMessage">发送</button>
      <!-- <button @click="changCode">代码模式</button> -->
    </div>
  </div>
  </template>
  
  <script>

import axios from 'axios';


  export default {
    data() {
      return {
        newMessage: '',
        messages: [],
        // audioUrl:'',
        isCode:false,
        audioUrl: '', 
      }
    },
    methods: {
      playAudio(textContent) {
        const textTo = textContent;
       axios.post('http://localhost:8080/jeecg-boot/boot/chartGPTController/talkTTS', {
        inText: textTo,
        userId:'wang123'
      })
      .then(response => {
        const url = response.data.result; // 获取TTS接口返回的音频地址
        this.audioUrl = url
        })
      .catch(error => {
        console.error('请求出错：', error);
      });
      if(this.audioUrl != undefined){
        const audio = new Audio();
        audio.src =  audioUrl;// 获取audio元素
        audio.play(); // 播放音频
      }
      
    },
    getTextContent(htmlContent) {
      const div = document.createElement('div');
      div.innerHTML = htmlContent;
      return div.textContent || div.innerText || '';
    },
    sendMessage() {
      this.messages.push({
          user: 'user',  // 输入的人信息
          text: this.newMessage  // 用户输入的消息
        });
      // 向后端发送请求，并将输入的消息添加到 messages 数组中
      axios.post('http://www.boot.laomaovps.top/boot/boot/chartGPTController/chatGPTtalk', {
        // axios.post('http://localhost:8080/jeecg-boot/boot/chartGPTController/chatGPTtalk', {
        inText: this.newMessage,
        userId:'wang123'
      })
      .then(response => {
        const result = response.data.result;
        const modifiedResult = result.replace(/```java/g, '<code class="code-block">').replace(/```/g, '</code>');
        const textresult ='<span>'+modifiedResult+'</span>'
        this.messages.push({
          user: 'robot',  // 机器人信息
          text: textresult  // 接口返回信息
          });
        })
      .catch(error => {
        console.error('请求出错：', error);
      });

      // 清空输入框
      this.newMessage = ''; 
   
    },
    changCode() {
      if(this.isCode){
        this.isCode = false;
      }else{
        this.isCode = true;
      }
      
    }
  }
  }
  </script>
  
  <style>

.code-block {
  font-family: 'Courier New', Courier, monospace;
  color: #fcfafa;
  background-color: #131313;
  padding: 10px;
  border-radius: 5px;
  white-space: pre-wrap;
}

  .chat-container {
  width: 800px;
	height: 500px;
  max-height: 500px;
	background: #bbd3e7;
	border: 1px solid #3283cf;
	position: fixed;
	top: 10%;
  left: 20%;

}
.message-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-messages div {
  min-height: 20px; /* 设置一个最小高度 */
}

.chat-messages {
  flex: 1;
  height: 85%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: scroll; /* 添加这一行 */
  /* 滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: #3283cf #bbd3e7;
}

.chat-input {
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.chat-input input {
  flex: 1;
  margin-right: 10px;
}

.message-left {
  float: left;
  clear: both;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  max-width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.message-left .avatar-container {
    margin-right: 10px;
  }

.message-right {
  float: right;
  clear: both;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  max-width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.message-right .avatar-container {
    margin-left: 10px;
  }

  .avatar-container {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    margin-left:10px;
  }

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .message-text {
    max-width: 70%;
    padding: 10px;
    background-color: rgb(14, 239, 14);
    border-radius: 5px;
  }
  </style>